<template>
	<view>
		<view class="task_container" v-for="(item,index) in taskList" :key="index">
			<view class="con_head">
				<image :src="item.store" class="portrait"></image>
				<view class="con_text">
					<view class="title">
						<view class="name">{{item.name}}</view>
						<view :class="{visiting:item.pay}">{{item.pay}}</view>
					</view>
					<view class="head_box">
						<view class="one">
							<image :src="item.phoneicon"></image>{{item.phone}}
						</view>
						<view>
							<image :src="item.icon"></image>80-120 <image :src="item.icons" style="margin-bottom:-6rpx;"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="place">
				<image :src="item.naviga"></image>{{item.address}}
			</view>
			<view class="foor_btn">
				<view class="btn1 btn">
					{{item.add}}
				</view>
				<view class="btn">
					{{item.stock}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			taskList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			}
		}
	}
</script>
<style lang="scss" scoped>
	// 任务内容样式区域
	.task_container {
		width: 95%;
		height: 228rpx;
		background-color: #fff;
		padding: 20rpx 10rpx 20rpx 25rpx;
		position: relative;
		border-radius: 15rpx;
		margin: 0rpx auto 80rpx;

		.con_head {
			display: flex;
			margin-bottom: 10rpx;

			.portrait {
				width: 120rpx;
				height: 120rpx;
				border-radius: 20rpx;
				margin-right: 30rpx;
			}

			.con_text {
				.title {
					display: flex;
					align-items: baseline;

					.name {
						font-size: 38rpx;
						margin-bottom: 20rpx;
					}

					.visiting {
						font-size: 20rpx;
						border: 1rpx solid #F7AE93;
						color: #F7AE93;
						padding: 0rpx 6rpx;
						text-align: bottom;
						border-radius: 30rpx;
					}
				}

				.head_box {
					display: flex;
					font-size: 24rpx;

					.one {
						margin-right: 70rpx;
					}

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}
		}

		.place {
			font-size: 26rpx;
			background-color: #F8F9FC;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			padding: 15rpx;

			image {
				width: 30rpx;
				height: 30rpx;

			}
		}

		.foor_btn {
			position: absolute;
			bottom: -40rpx;
			right: 10rpx;
			display: flex;
			font-size: 24rpx;

			.btn {
				color: #fff;
				background-color: #169BD5;
				border-radius: 15rpx;
				width: 152rpx;
				padding: 6rpx 4rpx;
				line-height: 26.66rpx;
				text-align: center;
			}

			.btn1 {
				margin-right: 30rpx;
			}
		}
	}
</style>
